<template>
  <div
    v-loading="loading"
    class="special"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    style="height:100%;"
  >
    <HeaderContent />
    <div class="homePJ">
      <div
        ref="firstMuneRef"
        style="padding: 10px 0px 10px 0px;"
      >
        <horizontalMenu ref="horizontalMenu" />
      </div>
      <div
        v-if="isShow"
        ref="secondMuneRef"
        style="padding: 5px 0px;display:flex"
      >
        <div ref="secondScroll" class="subMenu">
          <ul :style="{ width: getWidth }">
            <li
              v-for="(item, index) in secondList"
              :key="index"
              :class="[isActive === index ? 'isActive' : '']"
              class="liClass"
              @click="getPath(item, index)"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="iconClass">
          <span style="cursor:pointer" @click="gotoLeft">
            <svg-icon icon-class="left2" />
          </span>
          <span style="cursor:pointer" @click="gotoRight">
            <svg-icon icon-class="right2" />
          </span>
        </div>
      </div>
      <!-- <div class="special_home" style="height:calc(100% - 70px);">
        <div v-if="title !== '全景图'" :style="{ height: iframeHight }">
          <iframe class="frame_style" :src="src" />
        </div>
        <div v-else style="height:100%;">
          <panorama />
        </div>
      </div> -->
      <div v-if="title === '全景图'" class="special_home" style="height:calc(100% - 70px);">
        <div style="height:100%;">
          <panorama />
        </div>
      </div>
      <div
        v-else
        v-loading="!completeLoad"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        class="special_home"
        style="height:calc(100% - 118px);"
      >
        <div style="height:100%">
          <!-- <img v-show="!completeLoad" src="../../assets/images/homePage/file.png"> -->
          <!-- 加了v-show报表操作,多选等功能有时候会显示不出来 -->
          <!-- <iframe v-show="completeLoad" ref="iframe" frameborder="0" class="frame_style" :src="src" /> -->
          <iframe v-if="completeLoad" id="frame_style" ref="iframe" frameborder="0" class="frame_style" :src="src" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderContent from '@/layout/components/HeaderContent/index.vue';
import horizontalMenu from '@/components/horizontalMenu/index.vue';
// import panorama from '@/views/panorama/index.vue';
import panorama from '@/views/kqPageHome/index.vue';
import { getKeyByMenuId } from '@/api/propertyHomePage/index';
import { mapGetters } from 'vuex';

export default {
  name: 'SpecialHome',
  components: {
    HeaderContent,
    // 水平菜单
    horizontalMenu,
    panorama
  },
  inject: ['reload'],
  data() {
    return {
      isUrl: true,
      specialListGetSvg: [],
      loading: false,
      src: '',
      secondList: [],
      getWidth: '1000px',
      isActive: 0,
      isShow: true,
      title: '',
      iframeHight: '',
      parentName: '',
      completeLoad: false
    };
  },
  computed: {
    ...mapGetters(['permission_routes'])
  },
  watch: {
    secondList(a) {
      this.getMuneListHight();
    }
  },
  created() {
    window.addEventListener('message', e => {
      if (e.data === 'gotoHome') {
        // 回到首页
        const firstMenuTitle = this.$refs.horizontalMenu.dealDate[0].title;
        this.title = this.parentName = firstMenuTitle;
        // this.secondList = firstMenu.children || [];
        this.isActive = 0;
        this.title === '全景图' && (this.isShow = false);
        this.getSecondListByTitle(firstMenuTitle);
      } else if (e.data === 'close') {
        this.reload();
      } else {
        this.fatherFunction(e);
      }
    });
    this.getMuneListHight();
  },
  methods: {

    fatherFunction(e) {
      if (e.data.parentTitle) {
        this.getSecondListByTitle(e.data.parentTitle);
      }
      setTimeout(() => {
        this.secondList.map((item, index) => {
          if (item.title === e.data.title) {
            this.isActive = index;
          }
        });
      }, 200);
    },
    getSecondListByTitle(title) {
      this.$refs.horizontalMenu.dealDate.map((item, index) => {
        if (item.title === title) {
          this.$refs.horizontalMenu.activeIndex = item.path;
          this.permission_routes.map(o => {
            if (o.title && o.title === title && o.children) {
              this.secondList = o.children;
              this.getWidth = o.children.length * 300 + 'px';
              this.getMuneListHight();
            }
          });
        }
      });
    },
    getPath(item, index) {
      this.src = '';
      if (item.thirdWebsite !== '' && item.thirdWebsite) {
        const src = item.thirdWebsite;
        window.open(src);
      } else {
        localStorage.setItem('specialPanorama', '');
        if (item.parentTitle === '全景图') {
          this.title = '全景图';
        } else {
          this.title = item.title;
        }
        if (item.title !== '全景图') {
          this.isActive = index;
          if (item.path.indexOf('http') === -1) {
            this.isUrl = true;
            let specialParam = {};
            if (item.type === 0 && item.parentTitle) {
              getKeyByMenuId({
                menuId: item.id
              }).then(res => {
                if (res.success) {
                  specialParam = {
                    parentName: this.parentName,
                    name: item.name,
                    title: item.title,
                    sId: res.data.sId.split('-')[0],
                    defId: res.data.id,
                    key: res.data.key,
                    id: res.data.id,
                    bizKey: '',
                    flag: 0,
                    fileType: res.data.fileType,
                    menuId: item.id,
                    taskId: '',
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop
                  };
                  const host = window.location.host;
                  const name = window.location.href.split('/')[3];
                  let urlParams = '';
                  for (const key in specialParam) {
                    urlParams = urlParams + '&' + key + '=' + specialParam[key];
                  }
                  if (item.isTargetNew + '' === '0') {
                    if (item.componentPath.indexOf('/') !== -1) {
                      document.getElementById('frame_style').contentWindow.location.reload();
                      this.src = `http://${host}/${name}/#${
                        item.path
                      }?sign=1${urlParams}`;
                    } else {
                      this.src = `http://${host}/${name}/#/error?sign=1${urlParams}`;
                    }
                  } else {
                    if (item.componentPath.indexOf('/') !== -1) {
                      const src = `http://${host}/${name}/#${
                        item.path
                      }?sign=1${urlParams}`;
                      window.open(src);
                    } else {
                      const src = `http://${host}/${name}/#/error?sign=1${urlParams}`;
                      window.open(src);
                    }
                  }
                  localStorage.setItem('siderName', item.meta.title);
                } else {
                  this.$message({
                    message: '该菜单存在问题，请联系运维人员',
                    type: 'warning'
                  });
                }
              });
            } else {
              const params = {
                parentName: this.parentName,
                title: item.meta.title,
                menuId: item.id,
                flag: 0,
                sId: 'TabsTable',
                isHideLeft: item.isHideLeft,
                isHideTop: item.isHideTop
              };
              const host = window.location.host;
              const name = window.location.href.split('/')[3];
              let urlParams = '';
              for (const key in params) {
                urlParams = urlParams + '&' + key + '=' + params[key];
              }
              if (item.isTargetNew + '' === '0') {
                if (item.componentPath.indexOf('/') !== -1) {
                  this.completeLoad = false;

                  this.src = `http://${host}/${name}/#${
                    item.path
                  }?sign=1${urlParams}`;
                  setTimeout(() => {
                    this.completeLoad = true;
                  }, 1500);
                } else {
                  this.completeLoad = false;
                  this.src = `http://${host}/${name}/#/error?sign=1${urlParams}`;
                  setTimeout(() => {
                    this.completeLoad = true;
                  }, 1500);
                }
              } else {
                if (item.componentPath.indexOf('/') !== -1) {
                  const src = `http://${host}/${name}/#${
                    item.path
                  }?sign=1${urlParams}`;
                  window.open(src);
                } else {
                  const src = `http://${host}/${name}/#/error?sign=1${urlParams}`;
                  window.open(src);
                }
              }
              localStorage.setItem('siderName', item.meta.title);
            }
          } else {
            setTimeout(() => {
              this.isUrl = false;
              this.src = item.path;
            }, 200);
          }
        }
      }
    },
    gotoRight() {
      this.$refs.secondScroll.scrollLeft += 240;
    },
    gotoLeft() {
      this.$refs.secondScroll.scrollLeft -= 240;
    },
    getMuneListHight() {
      this.$nextTick(() => {
        const firstMuneHight =
          (this.$refs.firstMuneRef && this.$refs.firstMuneRef.offsetHeight) ||
          0;
        const secondMuneHight =
          (this.$refs.secondMuneRef && this.$refs.secondMuneRef.offsetHeight) ||
          0;
        this.iframeHight = `calc(100vh - (68px + ${firstMuneHight}px + ${secondMuneHight}px+10px))`;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$text-shadow: 4px 1px 6px rgba(0, 0, 0, 0.5);
$vw: 1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.homePJ{
  background-image: url("~@/assets/img/specialHome/kqhomeBG.png");
  background-size: 100% 100%;
  height: calc(100% - 68px);
}
.special {
  .pointer {
    cursor: pointer;
    z-index: 1;
  }
}

.subMenu:hover {
  cursor: pointer;
}
.subMenu {
  background-color:  rgba(255,255,255,0.10);
  background-image: none;
  background-size: auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
  padding-right: 15px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  color: #e8c295;
  font-weight: bolder;
  width: calc(100vw - 70px);
  margin-left: 1%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-x: hidden;
}
.frame_style {
  border: medium none;
  height: 100%;
  width: 100%;
  padding:0 10px 10px;
}
ul {
  margin-bottom: 0em;
}
ul li {
  list-style: none;
  padding: 5px;
  margin: 0 15px;
  float: left;
  color: #fff;
  border-bottom-color: transparent;
  cursor: pointer;
  // background-color: rgb(50, 80, 97);
}
.iconClass {
  background-color:  rgba(255,255,255,0.10);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 30px;
  width: 35px;
  text-align: center;
}
.iconClass /deep/ .svg-icon {
  width: 15px !important;
  height: 15px !important;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 1.2rem;
}
.liClass:hover {
  color: #fff;
  background-color: rgb(204, 204, 204);
}
.isActive {
  color: #FAAD14;
}
</style>
